<template>
  <Row>
    <Col :xs="24" :sm="12" :md="6">
      <WorkbenchCard title="总销售额" value="¥ 126560">
        <div>
          月同比 56.67%
          <CaretUpOutlined style="color: red" />
          日同比 19.16%
          <CaretDownOutlined style="color: green" />
        </div>
        <template #footer> 日销售额¥ 12423 </template>
      </WorkbenchCard>
    </Col>
    <Col :xs="24" :sm="12" :md="6">
      <WorkbenchCard title="访问量" value="88460">
        <WorkbenchChart
          :option="{
            xAxis: {
              show: false,
              data: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月',
              ],
            },
            yAxis: {
              show: false, // 隐藏坐标轴
            },
            series: {
              type: 'line',
              data: [20, 30, 11, 24, 20, 30, 14, 24, 20, 30, 12, 24],
              smooth: true, // 是否平滑曲线显示
              itemStyle: {
                // 折线拐点标志的样式
                opacity: 0,
              },
              lineStyle: {
                // 线条样式
                color: '#9a63e5',
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#9a63e5', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#fff', // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            grid: {
              top: 10,
              bottom: 0,
              left: -10,
              right: -10,
              // containLabel: true,
            },
          }"
        />
        <template #footer> 日访问量 1234 </template>
      </WorkbenchCard>
    </Col>
    <Col :xs="24" :sm="12" :md="6">
      <WorkbenchCard title="总销售额" value="¥ 126560">
        <WorkbenchChart
          :option="{
            xAxis: {
              show: false,
              data: [
                '一月',
                '二月',
                '三月',
                '四月',
                '五月',
                '六月',
                '七月',
                '八月',
                '九月',
                '十月',
                '十一月',
                '十二月',
              ],
            },
            yAxis: {
              show: false, // 隐藏坐标轴
            },
            series: {
              type: 'bar',
              data: [20, 30, 11, 24, 20, 30, 14, 24, 20, 30, 12, 24],
            },
            grid: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            },
          }"
        />
        <template #footer> 日销售额¥ 12423 </template>
      </WorkbenchCard>
    </Col>
    <Col :xs="24" :sm="12" :md="6">
      <WorkbenchCard title="总销售额" value="¥ 126560">
        <WorkbenchChart
          :option="{
            xAxis: {
              show: false,
              min: 0,
              max: 100,
            },
            yAxis: {
              data: ['进度'],
              show: false, // 隐藏坐标轴
            },
            series: {
              type: 'bar',
              data: [78],
              // 柱条的宽度
              barWidth: 10,
              // 柱条的样式
              itemStyle: {
                color: 'pink',
              },
              // 是否显示背景色
              showBackground: true,
              // 提示文本
              label: {
                show: true,
                formatter: '|', // 文本内容
                color: 'pink', // 颜色
                position: 'right', // 位置
              },
            },
            grid: {
              left: 0,
              right: 0,
              top: 0,
              bottom: 0,
            },
          }"
        />
        <template #footer>
          周同比 12%
          <CaretUpOutlined style="color: red" />
          日同比 11%
          <CaretDownOutlined style="color: green" />
        </template>
      </WorkbenchCard>
    </Col>
  </Row>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'FirstFloor',
  });
</script>

<script lang="ts" setup>
  import { Row, Col } from 'ant-design-vue';
  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
  import WorkbenchCard from './WorkbenchCard.vue';
  // import LineChart from './LineChart.vue';
  // import BarChart from './BarChart.vue';
  // import ProgressChart from './ProgressChart.vue';
  import WorkbenchChart from '../WorkbenchChart.vue';
</script>
